<template>
    <!-- 筛选区 -->
    <div class="sub-filter" v-if="list.length">
        <div class="item" v-for="item in list" :key="item.id">
            <div class="head">{{  item.name  }}：</div>
            <div class="body">
                <!-- <a href="javascript:;">全部</a> -->
                <a href="javascript:;" v-for="i in item.properties" :key="i.id" :class="{ active: i.active }"
                    @click="selected(item, i)">{{  i.name  }}</a>
            </div>
        </div>
    </div>
    <div v-else class="sub-filter">
        <Skeleton class="item" width="800px" height="40px" />
        <Skeleton class="item" width="800px" height="40px" />
        <Skeleton class="item" width="600px" height="40px" />
        <Skeleton class="item" width="600px" height="40px" />
        <Skeleton class="item" width="600px" height="40px" />
    </div>
</template>
<script setup>
import { reactive } from 'vue'
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
})

const emit = defineEmits()

const filterParams = reactive({
    attrs: [],
    brandId: null
})

const selected = (item, curr) => {
    item.properties.forEach(p => {
        p.active = false
    })
    curr.active = true

    let flag = false
    const obj = {
        groupName: item.name,
        propertyName: curr.name,
        level: curr.level
    }
    if (filterParams.attrs.length) {
        for (let i = 0; i < filterParams.attrs.length; i++) {
            if (filterParams.attrs[i].level == curr.level) {
                flag = true
                filterParams.attrs[i] = obj
            }
        }
    } 
    if (!flag && curr.level !== 0) {
        filterParams.attrs.push(obj)
    }

    if (curr.level == 0)
        filterParams.brandId = curr.id

    emit('filter-change', filterParams)
}
</script>
<style scoped lang='scss'>
// 筛选区
.sub-filter {
    background: #fff;
    padding: 25px;

    .item {
        display: flex;
        line-height: 40px;

        .head {
            width: 80px;
            color: #999;
        }

        .body {
            flex: 1;

            a {
                margin-right: 36px;
                transition: all .3s;
                display: inline-block;

                &.active,
                &:hover {
                    color: $mainColor;
                }
            }
        }
    }

    .skeleton {
        padding: 10px 0;
    }
}
</style>